<template>
    <el-container class="wrapper">
        <el-header class="wrapper-header">
            <section class="wrapper-header-title">
                <img v-if="themeData.remark2" style="vertical-align: middle;" :src="fileUrl + themeData.remark2" height="40px" alt="">
                <span>{{themeData.remark1}}</span>
            </section>
            <section class="wrapper-header-right">
                <i class="el-icon-user-solid"></i>
                <a class="el-header-user">{{nickname}}</a>
                <a class="el-header-logout" v-on:click="logout()">退出</a>
            </section>
        </el-header>
        <el-container class="wrapper-body">
            <el-aside class="wrapper-body-left">
                <el-menu background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" unique-opened router :active="actived" :default-active="actived">
                    <!-- <el-menu-item index="HOME" :route="{name:'MgtIdxHome', query: {menu: 'HOME'}}">
                        <i class="el-icon-menu"></i>
                        <span slot="title">首页</span>
                    </el-menu-item> -->
                    <el-menu-item index="liveVideo" :route="{name:'liveVideo', query: {menu: 'liveVideo'}}">
                        <i class="el-icon-menu"></i>
                        <span slot="title">实时监控</span>     
                    </el-menu-item>
                    <el-menu-item index="playbackVideo" :route="{name:'playbackVideo', query: {menu: 'playbackVideo'}}">
                        <i class="el-icon-menu"></i>
                        <span slot="title">监测结果</span>
                    </el-menu-item>
                    <el-submenu index="SYS">
                        <template slot="title">
                            <i class="el-icon-s-unfold"></i>
                            <span>系统管理</span>
                        </template>
                        <el-menu-item index="SYS-USER" :route="{name:'MgtIdxSysUser', query:{menu:'SYS-USER'}}">
                            <i class="el-icon-tickets"></i>
                            <span>用户管理</span>
                        </el-menu-item>
                        <el-menu-item index="SYS-ROLE" :route="{name:'MgtIdxSysRole', query:{menu:'SYS-ROLE'}}">
                            <i class="el-icon-tickets"></i>
                            <span>角色管理</span>
                        </el-menu-item>
                        <el-menu-item index="SYS-MENU" :route="{name:'MgtIdxSysMenu', query:{menu:'SYS-MENU'}}">
                            <i class="el-icon-tickets"></i>
                            <span>菜单管理</span>
                        </el-menu-item>
                        <!-- <el-submenu index="10204">
                            <template slot="title">
                                <i class="el-icon-arrow-right"></i>
                                <span>个人中心</span>
                             </template>
                            <el-menu-item index="SYS-HOME-PERSON" :route="{name:'MgtIdxSysPersonInfo', query:{menu:'SYS-HOME-PERSON'}}">
                                <i class="el-icon-tickets"></i>
                                <span>基本信息</span>
                            </el-menu-item>
                            <el-menu-item index="SYS-HOME-PWD" :route="{name:'MgtIdxSysPersonPwd', query:{menu:'SYS-HOME-PWD'}}">
                                <i class="el-icon-tickets"></i>
                                <span>修改密码</span>
                            </el-menu-item>
                        </el-submenu> -->
                        <el-menu-item index="sysSet" :route="{name:'sysSet', query: {menu: 'sysSet'}}">
                            <i class="el-icon-tickets"></i>
                            <span slot="title">系统配置</span>     
                        </el-menu-item>
                        <el-menu-item index="setVideo" :route="{name:'setVideo', query: {menu: 'setVideo'}}">
                            <i class="el-icon-tickets"></i>
                            <span slot="title">视频监控</span>     
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <transition name="fade">
                <router-view></router-view>
            </transition>
        </el-container>
    </el-container>
</template>

<script>
export default {
    data() {
        return {
            fileUrl: this.$ApiUtil.fileUrl,
            username: window.localStorage.username,
            nickname: window.localStorage.nickname,
            menus: [],
            actived: 'HOME',
            themeData: {}
        };
    },
    mounted: function () {
        var _this = this;
        var idx = window.location.hash.indexOf("menu=");
        if (idx > -1) {
            _this.actived = window.location.hash.substr(idx).replace("menu=", "");
        }
        _this.$HttpUtil.get(_this.$ApiUtil.manage.home.menus, { sysId: 1 }).then(function (result) {
            console.info(result);
            _this.menus = result.data;
        });
        _this.getSystheme();
    },
    methods: {
        /**
         * 获取系统信息
         */
        getSystheme() {
            let _this = this;
            _this.$HttpUtil.get(_this.$ApiUtil.themeSingle).then((result) => {
                if(result.code == 200) {
                    _this.themeData = result.data;
                    // _this.bgStyle = {
                    //     background: "url("+_this.fileUrl + result.data.remark3+")"
                    // } 
                }
            });
        },
        logout() {
            var _this = this;
            _this.$confirm('是否确定退出系统？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                window.localStorage.removeItem('token');
                _this.$router.replace({ name: 'MgtLogin' });
            });
        }
    }
};
</script>

<style>
@import "../../assets/css/manage.css";
.fade-enter {
    opacity: 0;
}
.fade-enter-active {
    transition: opacity 1s;
}
.fade-leave {
    opacity: 0;
}
.fade-leave,
.fade-leave-to {
    opacity: 0;
}
</style>